<template>
  <div class="app">
    <div class="header" v-if="!qiankun">
      <!-- <div class="header-menu">
        <img
          src="../assets/image/menu.png"
          alt
          width="37"
          height="27"
          class="menu"
          @click="menu"
        />
      </div> -->

      <div class="head_logo_text">
        <img src="../assets/imgCar/logo.png" alt="" class="headerLogo" />
      </div>
      <div class="btn-bell">
        <el-badge
          :value="this.message == 0 ? hidden : this.message"
          :max="99"
          class="item"
        >
          <router-link to="/system/announcements">
            <i class="el-icon-bell"></i>
          </router-link>
        </el-badge>
      </div>
      <div class="back">
        <!-- 用户 -->
        <div class="user">
          <img
            src="../assets/image/img.png"
            width="36"
            height="36"
            alt="默认头像"
          />
          <!-- <el-dropdown trigger="click" @command="handleCommand">
            <span class="el-dropdown-link" style="color: #fff">
              {{ users.name }}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item icon="el-icon-s-custom" command="person"
                >个人中心</el-dropdown-item
              >
              <el-dropdown-item icon="el-icon-edit-outline" command="resetpass"
                >修改密码</el-dropdown-item
              >
              <el-dropdown-item icon="el-icon-delete-location" command="quit"
                >退出登录</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown> -->
        </div>
      </div>
    </div>
    <menu-page v-show="showMenu" />
    <per-cenent ref="per" />
    <upd-pass ref="updPass" />
    <!---->
    <div class="content">
      <div class="content_left" v-if="!qiankun">
        <menus ref="menus" />
      </div>
      <div class="content_right">
        <!-- <tab-page /> -->
        <!--内容区-->
        <section class="section_">
          <keep-alive :include="keepDatas">
            <router-view />
          </keep-alive>
        </section>
      </div>
    </div>
  </div>
</template>

<script>
import include from "./include.js";
import MenuPage from "./menu";
// import TabPage from "./tab";
import PerCenent from "./perCenent";
import Menus from "./menus";
import { mapState, mapMutations } from "vuex";
import { logOut } from "@/api/power/user";
import { getEcommission } from "@/api/system/announcements";
import updPass from "./updPass";
import mixin from "@/mixin";
export default {
  data() {
    return {
      users: JSON.parse(sessionStorage.getItem("user")),
      user: {},
      showMenu: false,
      dialogVisible: true,
      message: "",
      hidden: "",
      keepData: [],
      include: [],
      keepDatas: [],
      qiankun: window.__POWERED_BY_QIANKUN__
    };
  },
  components: { MenuPage, Menus, PerCenent, updPass },
  created() {
    this.include = include.name;
  },
  watch: {
    tab(a) {
      this.keepDatas = [];
      a.forEach((item) => {
        let a = item.path.split("/");
        this.keepDatas.push(a[a.length - 1]);
      });
      return;
    },
  },
  async mounted() {
    //数据
    this.handlecommission();
    // if (JSON.parse(sessionStorage.getItem("user")).state == "4") {
    //   this.$refs.updPass.visible = true;
    // }

  },
  mixins: [mixin],
  computed: {
    ...mapState(["tab"]),
  },
  methods: {
    ...mapMutations([
      "stateColseAll",
      "setPath",
      "addRoutes",
      "set_v_showData",
    ]),
    // 递归判断列表，把最后的children设为undefined
    getTreeData(data) {
      let that = this;
      for (let i = 0; i < data.length; i++) {
        if (data[i].children.length < 1) {
          // children若为空数组，则将children设为undefined
          data[i].children = undefined;
        } else {
          // children若不为空数组，则继续 递归调用 本方法
          this.getTreeData(data[i].children);
        }
      }
      return data;
    },
    //取最后一个下划线后面字段
    keepNames(paths) {
      //  	console.log(paths)
      //  	console.log(paths.replace('/','-'))
      //			return paths
      return paths.replace("/", "-");
      //		return paths.split('/')[paths.split('/').length-1]
    },
    //切换
    menu() {
      this.showMenu = !this.showMenu;
    },
    handleCommand(command) {
      if (command === "quit") {
        this.quit();
      } else if (command === "person") {
        this.perCon();
      } else if (command === "resetpass") {
        this.changePswd();
      }
    },
    //退出
    // perCon() {
    //   this.$refs.per.visible = true;
    //   this.$refs.per.sign = 1;
    // },
    // changePswd() {
    //   this.$refs.per.visible = true;
    //   this.$refs.per.sign = 2;
    // },
    quit() {
      this.$confirm("此操作将退出登录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        confirmButtonClass: "messagebox-button",
        cancelButtonClass: "messagebox-button",
      })
        .then(() => {
          logOut(this.users.id).then((res) => {
            // if (res.code == "000000") {
            this.$message({
              type: "success",
              message: "您已退出登录!",
            });
            localStorage.clear();
            sessionStorage.clear();
            this.stateColseAll([]);
            this.set_v_showData([]);
            let this_ = this;
            setTimeout(function () {
              this_.$router.push("/login");
              window.location.reload(true);
            }, 300);
            // }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作",
          });
        });
    },
    //获取未处理的待办事项数量
    async handlecommission() {
      const { data: res } = await getEcommission();
      this.message = res.data;
    },
  },
};
</script>

<style lang="scss">
.headerLogo {
  height: 83px;
  margin-left: 46px;
  margin-top: 8px;
  width: 145px;
}
.app {
  .head_logo_text {
    width: 230px;
    height: 95px;
    background-color: #006175;
    display: block;
    color: #333;
    float: left;
    letter-spacing: 2px;
  }
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: auto;
  .content {
    display: flex;
    flex: 1;
    overflow: auto;
    position: relative;
    .content_right {
      flex: 1;
      display: flex;
      position: relative;
      flex-direction: column;
      box-sizing: border-box;
      background: #f8f9fb;
      // padding-top: 32px;
      overflow: auto;
      .child-content {
        flex: 1;
      }
      .section_ {
        overflow: auto;
        height: 100%;
      }
    }
  }
}

.header {
  position: relative;
  width: 100%;
  height: 93px;
  background: #006175;
  color: #fff;
  opacity: 1;
  border-bottom: 2px solid #006175;
  // background-image: url("../assets/image/top-bg.png");
  .header-menu {
    float: left;
    width: 80px;
    height: 70px;
    background: #1a2a37;
  }
  .menu {
    cursor: pointer;
    margin: 22px;
  }
  .logo {
    float: left;
    margin-left: 30px;
    margin-top: 15px;
  }
  .title {
    text-align: center;
    color: #98cbff;
    font-size: 24px;
  }
  // 消息提示
  .btn-bell {
    position: absolute;
    right: 80px;
    width: 50px;
    height: 50px;
    .el-badge {
      position: absolute;
      top: 15%;
      width: 80%;
      height: 80%;
    }
    //铃铛的大小
    .el-icon-bell {
      position: absolute;
      top: 20px;
      font-size: 24px;
    }
    //提示数字的大小
    .el-badge__content {
      border: 1px solid #cf3636;
    }
  }
  .back {
    position: absolute;
    right: 0;
    padding: 0 20px;
    top: 0;
    text-align: center;

    .user {
      float: left;
      img {
        float: left;
        margin: 17px 12px 0 0;
      }

      /deep/ .el-dropdown {
        color: #fff;
      }
    }
  }
}
</style>

